import { Select, Form, Input, DatePicker, Button } from "antd";
import "@/components/BaseForm/antdform.less";
import { baseFormConfig } from "@/components/BaseForm/config";
import { memo, useState } from "react";
import { ButtonStyle } from "../../../config/globalStyle";
const { TextArea } = Input;
const { RangePicker } = DatePicker;
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

const HomeWorkForm = (props: {
  initialValues: any;
  closeModal: () => void;
  handleConfirmEdit: (params?: any) => void;
}) => {
  const { initialValues, closeModal, handleConfirmEdit } = props;
  const [nameValue, setNameValue] = useState(initialValues.name);
  const [phoneNumberValue, setPhoneNumberValue] = useState(
    initialValues.phoneNumber
  );

  const handleSubmit = () => {
    const params = { name: nameValue, phoneNumber: phoneNumberValue };
    handleConfirmEdit(params);
  };
  return (
    <Form
      {...baseFormConfig}
      name="basic"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      initialValues={initialValues}
    >
      <Form.Item
        label="标题"
        name="name"
        rules={[{ required: true, message: "请输入标题!" }]}
      >
        <Input
          placeholder="任务名称"
          value={nameValue}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
            setNameValue(e.target.value);
          }}
        />
      </Form.Item>

      <Form.Item
        label="手机号"
        name="phoneNumber"
        rules={[{ required: true, message: "请输入手机号!" }]}
      >
        <Input
          placeholder="手机号"
          value={phoneNumberValue}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
            setPhoneNumberValue(e.target.value);
          }}
        />
      </Form.Item>
      <Form.Item
        label="时间"
        name="time"
        rules={[{ required: true, message: "添加发布时间" }]}
      >
        <RangePicker placeholder={["开始日期", "结束日期"]} />
      </Form.Item>

      <Form.Item
        label="简介"
        name="content"
        rules={[{ required: true, message: "添加一段任务描述" }]}
      >
        <TextArea rows={4} placeholder="添加一段任务描述" maxLength={6} />
      </Form.Item>
      <Form.Item>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between"
          }}
        >
          <Button key="cancel" onClick={closeModal} style={ButtonStyle}>
            取消
          </Button>
          <Button key="submit" type="primary" onClick={handleSubmit} style={ButtonStyle}>
            发布
          </Button>
        </div>
      </Form.Item>
    </Form>
  );
};

export default memo(HomeWorkForm);
